<template>
  <div>
    <header class="header">
        <slot name="header"></slot>
    </header>
    <main class="main">
        <div v-for="(item,index) in data">
            <slot :index="index" :data="item"></slot>
        </div>
    </main>
    <footer class="footer">
        <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted} from 'vue'

type M = {
    name:string,
    age:number
}

const data = reactive<M[]>([
    {
    name:'我是柳俊1号',
    age:21
},
{
    name:'我是柳俊2号',
    age:22
},
{
    name:'我是柳俊3号',
    age:23
},
{
    name:'我是柳俊4号',
    age:24
}
])
</script>
<style scoped lang="scss">
.header{
    width: 800px;
    height: 200px;
    background-color: aqua;
}
.main{
    width: 800px;
    height: 200px;
    background-color: red;
    margin: 20px 0;
}
.footer{
    width: 800px;
    height: 200px;
    background-color: rgb(24, 233, 35);
}
</style>